<ion-header>
    <ion-toolbar>
        <div class="row">
            <div class="col-span-11 displaycss">
                <ion-buttons slot="start">
                    <ion-back-button></ion-back-button>
                </ion-buttons>
                <ion-searchbar #searchbar cancelButtonIcon cancelButtonText="返回" debounce="500" placeholder="搜索客户" (ionChange)="onSearchChange(searchbar.value)"></ion-searchbar>
            </div>
            <div class="col-span-1 row middle-span depsearchcss">
                <ion-icon name="list" size="large" (click)="openEnd()"></ion-icon>
                <!-- <ion-icon name="list" size="large" routerLink="/product/product-directory"></ion-icon> -->
            </div>
        </div>
    </ion-toolbar>
</ion-header>

<ion-content>
    <ion-list class="listcss">
        <app-product-item *ngFor="let item of productList" [data]="item"></app-product-item>
    </ion-list>
</ion-content>
<ion-menu side="end" type="push">
    <ion-header>
        <ion-toolbar>
            <ion-title>筛选条件</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-item-group>
            <ion-list>
                <ion-item-divider>
                    <ion-label>理财产品分类</ion-label>
                </ion-item-divider>
                <ion-chip outline color="primary" *ngFor="let item of productType" [ngClass]="{'clickcss':item.flagchage}" (click)="changeCss(item,'1')">
                    <ion-label>{{item.name}}</ion-label>
                </ion-chip>
            </ion-list>
        </ion-item-group>
        <ion-item-group>
            <ion-list>
                <ion-item-divider>
                    <ion-label>风险</ion-label>
                </ion-item-divider>
                <ion-chip outline color="primary" *ngFor="let item of productfx" [ngClass]="{'clickcss':item.flagchage}" (click)="changeCss(item,'2')">
                    <ion-label>{{item.name}}</ion-label>
                </ion-chip>
            </ion-list>
        </ion-item-group>
        <ion-item-group>
            <ion-list>
                <ion-item-divider>
                    <ion-label>产品周期</ion-label>
                </ion-item-divider>
                <ion-chip outline color="primary" *ngFor="let item of productzq" [ngClass]="{'clickcss':item.flagchage}" (click)="changeCss(item,'3')">
                    <ion-label>{{item.name}}</ion-label>
                </ion-chip>
            </ion-list>
        </ion-item-group>
        <ion-item-group>
            <ion-list>
                <ion-item-divider>
                    <ion-label>产品起购价</ion-label>
                </ion-item-divider>
                <ion-chip outline color="primary" *ngFor="let item of productprice" [ngClass]="{'clickcss':item.flagchage}" (click)="changeCss(item,'4')">
                    <ion-label>{{item.name}}</ion-label>
                </ion-chip>
            </ion-list>
        </ion-item-group>
        <div class="ion-text-right ion-padding-end">
            <ion-button size="small" (click)="restFun()">重置</ion-button>
            <ion-button size="small" (click)="Querysenior()">确定</ion-button>
        </div>
    </ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>